<template>
  <div class="block-stores" style="padding-top: 40px">
    <h3>STORES</h3>
    <h4>折扣活动时间:2022/10/1-2023/2/2</h4>
    <div>
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        style="width: 100%"
      >
        <div v-for="(item, index) of des" :key="index">
          <van-swipe-item
            ><img v-src="item.img" />      
        <div class="Cname">{{ item.Chinese }}</div>
        <div class="Ename">{{ item.English_name }}</div>
            <p>
              {{ item.TEL }}
              <br />
              {{ item.address }}
              <!-- <br />
              {{ item.phone }} -->
              <br />
              {{ item.time }}
            </p>
          </van-swipe-item>
        </div>
      </van-swipe>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      des: {},
    };
  },
  mounted() {
    this.axios.get("/store").then((res) => {
      // console.log("店铺res", res);
      this.des = res.data.results;
    });
  },
};
</script>

<style scoped>
.block-stores {
  margin-top: 15px;
  background-color: #e9e6e5;
  height: 190vw;
}

.block-stores h4 {
  font-family: cursive;
  font-size: 5vw;
  color: #999;
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

.my-swipe {
  height: 150vw;
  text-align: center;
}

.my-swipe img {
  width: 95%;
  display: inline;
  height: 90vw;
}

h3 {
  font-family: Prata, serif;
  font-size: 9vw;
  letter-spacing: 0.35rem;
  color: #444;
  text-align: center;
  padding-bottom: 3px;
  line-height: 1.5;
  padding-top: 25px;
}

.block-stores p {
  line-height: 2;
  margin-top: 15px;
  color: #444;
  text-align: left;
  margin-left: 50px;
  font-size: 4vw;
}

.block-stores .Ename {
  text-align: center;
  font-size: 4vw;
  font-family: cursive;
}
.block-stores .Cname {
  font-size: 6vw;
  margin-top: 15px;
  text-align: center;
}
</style>
